<template xmlns:class="as">
  <scroll-view scroll-y class="scroll-view" refresher-enabled="true" :refresher-triggered="refresh" @scrolltolower="onRefresh" >
    <view class="product-data-list" v-if="productList != null && productList.length != 0">
		<view  v-for="(product,index) in productList" class="item" hover-class="none" :key="index" @click="this.pageTo(product.id)">
		  <navigatxor url="" >
			<view class="tit-a" v-if="product.exhibitionList != null" v-for="(ee,index) in product.exhibitionList"  style="width: 50%;position: absolute;top: 0;right: 0;color: #fff" :style="{background: getProductFontBackgroundColor(product)}" >
				{{product.exhibitionList[0].exhibitionShortName}}
			</view>
			<image class="img" :src="product.banarImg && product.banarImg.indexOf(',')>0  ? product.banarImg.split(',')[0]: product.banarImg " />
			<view class="new" v-if="product.newTag === 1 " >新上架</view>
			<view class="title">
			  <view class="newProduct" v-if="product.isNewProduct === 1 ">新品</view>
			  <view class="yang" style="white-space: nowrap;height: 28rpx;" v-if="product.samplebookId !== 0 ">样册</view>
			  <view class="newProduct" v-if="product.ifRecommend === 1 ">Hot</view>
			  {{product.tradeName}}
			</view>
			<view class="price">
			  <text style="font-size: 36rpx;">￥{{product.price}}</text>
			</view>
		  </navigatxor>
		</view>
		<view class="data-hint">
			<hint  ref="hint"></hint>
		</view>
    </view>
	<view v-else style="text-align:center;padding-top:210rpx">
		<image style="width: 305rpx;height: 245rpx;margin-bottom: 15rpx;" src="https://m.nocexpo.com/statics/js/modules/h5/img/wu.png"/>
		<view>暂无内容哦~</view>
	</view>
  </scroll-view>

</template>

<script>
export default {
  name: "ProductList",
  props: ['productList'],
  data(){
    return {
		refresh: false,
		
		};
  },
  onShow: function() {
    console.log('App 666');
  },
  onLoad() {
    this._freshing = false;
    setTimeout(() => {
      this.triggered = true;
    }, 1000)
  },
  methods:{
    handleTap: function () {
      console.log("子组件到底了");
      // 在这里触发自定义事件，将事件传递给父组件
      this.triggerEvent('handleTap', { message: 'Hello' })
    },
	onReachScollBottom(){
      console.log("hahahah");
	  this.$refs.hint.setStatus('loadingComplete');
    },
	onRefresh() {
      this.refresh= true;
	  this.$refs.hint.setStatus('loading');
      this.$emit('onReachBottom');
      // 这里不能直接让refresh直接为false，否则可能会发生下拉加载无法复位的情况
      setTimeout(() => {
        this.refresh = false;
      }, 500)
    },
	pageTo(id){
      uni.navigateTo({
        url: `/pages/product/productDetail/productDetail?productId=`+id
      })
    },
	getProductFontBackgroundColor(product){
	    // if (product.hasOwnProperty("exhibitionList")){
	        return product.exhibitionList[0].fontBackgroundColor
	    // }
	},
  }
}
</script>

<style scoped lang="scss">
	.item .img{
		height:386rpx;
		display: block;
	}
.newProduct{
	display: inline;
	width: 52rpx;
	line-height: 28rpx;
	background: linear-gradient(90deg, #F63737 0%, #FF7C45 100%);
	border-radius: 4rpx;
	color: #fff;
	font-size: 20rpx;
	text-align: center;
	height: 28rpx;
	white-space: nowrap;
	padding: 0 6rpx;
	margin-right: 10rpx;
}
.tit-a{
	padding: 0rpx 30rpx;
	height: 30rpx;
	font-size: 25rpx;
	color: #FFFFFF;
	line-height: 30rpx;
	text-align: center;
	border-radius: 20rpx 20rpx 0 20rpx;
}
.data-hint{
	margin-top: -24rpx;
	width: 100%;
}

</style>
